<template>
  <div class="content-box">
    <heading grade="1">分组</heading>
    <GroupSlider
      :value="activeGroup"
      :list="groupList"
      :slides="8"
      @change="handleChange"
      :height="'38px'">
      <template scope="scope">
        <p style="line-height:36px;">{{scope.groupName}}组</p>
      </template>
    </GroupSlider>
    <div class="group-teams">
      <GroupTeamShow
        :isPreview="false"
        :groupList="groupTeamList"
        :teamIndex="currentGroupIndex">
      </GroupTeamShow>
    </div>
    <div class="btn-group center">
      <el-button type="primary" @click="goBuild()">创建赛程</el-button>
    </div>
  </div>
</template>

<script>
import GroupSlider from '../components/GroupSlider'
import GroupTeamShow from './components/GroupTeamShow'
import Api from 'api/race'
import {generateGroup} from 'utils'
export default {
  components: {
    GroupSlider,
    GroupTeamShow
  },
  computed: {
    currentGroupIndex () {
      return this.groupList.indexOf(this.activeGroup)
    }
  },
  created () {
    this.getGroup()
  },
  data () {
    return {
      groupLength: 0,
      groupList: [],
      groupTeamList: [],
      activeGroup: {}
    }
  },
  methods: {
    getGroup () {
      Api.getCupGroup({matchId: this.$route.query.id}).then((res) => {
        this.groupLength = res.data.groupCount
        this.groupTeamList = res.data.cupGroups
        this.groupList = generateGroup(this.groupLength)
        this.activeGroup = this.groupList[0]
      })
    },
    handleChange (val) {
      let index = this.groupList.indexOf(val)
      if (index > -1) {
      }
      this.activeGroup = val
    },
    goBuild () {
      this.$router.push({
        path: '/race/detail/manage/generate',
        query: this.$route.query
      })
    }
  }
}
</script>

<style lang="scss">
@import '../../styles/var.scss';
.group-teams{
  padding: 20px;
  border:1px solid #f0f0f0;
  margin: 20px 0;
}
</style>
